import { FC, useEffect, useState } from 'react';
import styles from './addProject.less';
import { Button, Form, Input, Select, Cascader, Tabs, Radio, Layout, Menu, Modal, Table, Space, message } from 'antd';
import { DingdingOutlined, CopyOutlined, SaveOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons';
import { IndustryQuery } from '@/utils/interface';
import { AddItem, IAddIndustrySkillList, IDetailItem, LeadProjectList, ProjectResourcesList, saveTask, TrainingSyllabusList } from '@/utils/addindustry'
import { delTask, getAddIndustrySkill, getIndustry, getLeadProject, getProjectResources, getTrainingSyllabus, renderTask, saveEnvironment, saveProject, ResourcesItem, saveResoueces, saveTrainingSyllabusList } from '@/services/index';
import Editor from 'for-editor'
import { IRouteComponentProps } from '@umijs/renderer-react';
import { Link } from 'umi';
import useStore from '@/context/useStore';
import { observer } from 'mobx-react-lite';
const { SubMenu } = Menu;
const { Content, Sider } = Layout;
const sxtype = ['生产实训', '教学实训', '专业群实训'];
const tab = ['实训大纲', '实训任务', '项目资源', '实训环境', '前置项目']
const { TabPane } = Tabs;
const addProject: FC<IRouteComponentProps> = ({ location, history }) => {
    let { addIndustry } = useStore();
    //连接form
    const [form] = Form.useForm();
    //获取id
    let versoinId = location.query.versionId;
    let proId = location.query.proId;
    //获取行业标题
    let [curIndustry, setcurIndustry] = useState<IndustryQuery[]>([]);
    useEffect(() => {
        getIndustry().then(ok => {
            if (ok.code == 200) {
                setcurIndustry(ok.data)
            }
        })
    }, []);
    //获取专业标题
    let [skillLabel, setSkillLabel] = useState<IAddIndustrySkillList[]>([]);
    useEffect(() => {
        getAddIndustrySkill().then(ok => {
            setSkillLabel(ok.data)
        })
    }, []);
    //详情数据
    let [DetailsList, setDetailList] = useState<IDetailItem>({} as IDetailItem)
    //获取详情数据
    useEffect(() => {
        form.setFieldsValue({ ...addIndustry.addIndustryItem })
    }, [addIndustry.addIndustryItem])
    useEffect(() => {
        if (versoinId) {
            addIndustry.getIndustryDetail(versoinId as string);
        }
    }, []);
    //添加项目保存
    async function AddIndustry(res: AddItem) {
        let versionId = await addIndustry.addProject(res);
        history.replace(`/teachers/addProject?versionId=${versionId}&see=false`);
    };
    //上传图片
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = () => {
        setIsModalVisible(true);
    };
    const handleOk = () => {
        setIsModalVisible(false);
    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //添加任务渲染表格
    const column = [
        {
            title: '任务名称',
            dataIndex: 'taskName',
        },
        {
            title: '考核标准',
            dataIndex: 'assessmentStandard',
        },
        {
            title: '步骤数量',
            dataIndex: 'steptCount',
        },
        {
            title: '推荐工期',
            dataIndex: 'subTime',
        }, {
            title: '操作',
            render: (row: any) => (
                <Space size="middle">
                    <FormOutlined style={{ color: '#679cf6' }} />
                    <DeleteOutlined style={{ color: '#679cf6' }} onClick={() => {
                        setid(row.id)
                    }} />
                </Space>
            ),
        },];
    const Demo = () => (
        <Tabs defaultActiveKey="1" className={styles.Tabs}>
            <TabPane tab="实训大纲" key="1">
                <Layout >
                    <Sider className="site-layout-background" width={260}>
                        <Menu
                            className={styles.ant_menu}
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            style={{ height: '100%' }}
                        >
                            {
                                TrainingSyllabus.map((item, index) => {
                                    return <SubMenu key={index} title={item.label}>
                                        {/* {
                                            item.children.map((_item1: any) => {
                                                return <Menu.Item key={_item1.value} onClick={() => {
                                                    setbriefId(_item1.value)
                                                }}>{_item1.label}</Menu.Item>
                                            })
                                        } */}
                                    </SubMenu>
                                })
                            }
                        </Menu>
                    </Sider>
                    <Content style={{ padding: '0 24px', minHeight: 280 }}>
                        <Form
                            name="basic"
                            initialValues={{ remember: true }}
                            onFinish={AddT}
                        >
                            <Form.Item >
                                <Button type="primary" htmlType="submit">保存</Button>
                            </Form.Item>
                            <Form.Item name="content" className={styles.md}>
                                {
                                    briefId ? <Editor placeholder="开始编辑..." style={{ with: 200 }} /> : ""
                                }
                            </Form.Item>

                        </Form>

                    </Content>
                </Layout>
            </TabPane>
            <TabPane tab="实训任务" key="2">
                <Link to={`/teachers/addTask?proId=${location.query.proId}&versionId=${location.query.versionId}&see=false`}><Button type="primary">+添加任务</Button></Link>
                <Table rowKey='id' columns={column} dataSource={TaskList as any}></Table>
            </TabPane>
            <TabPane tab="项目资源" key="3">
                <Layout >
                    <Content >
                        <Layout >
                            <Sider className="site-layout-background" width={260}>
                                <Menu
                                    className={styles.ant_menu}
                                    mode="inline"
                                    defaultSelectedKeys={['1']}
                                    defaultOpenKeys={['sub1']}
                                    style={{ height: '100%' }}
                                >
                                    {
                                        ProjectResourcesList.map((item, index) => {
                                            return <SubMenu key={index} title={item.label}>
                                                {
                                                    item.children.map((_item1: any, index1: any) => {
                                                        return <Menu.Item key={_item1.value} onClick={() => {
                                                            setresourceId(_item1.value)
                                                        }}>{_item1.label}</Menu.Item>
                                                    })
                                                }
                                            </SubMenu>
                                        })
                                    }
                                </Menu>
                            </Sider>
                            {
                                resourceId ? <Content style={{ padding: '0 24px', minHeight: 280 }}>
                                    <div className={styles.resource}>
                                        <Form onFinish={AddR}>
                                            <div className={styles.resource_title}>
                                                <Form.Item>
                                                    <CopyOutlined />
                                                    <Button htmlType="submit"> 保存</Button>
                                                </Form.Item>
                                            </div>
                                            <div className={styles.resource_content}>
                                                <Form.Item label="资源名称" name="resName">
                                                    <Input />
                                                </Form.Item>
                                                <div className={styles.type}>
                                                    <p>提交类型:</p>
                                                    <Radio.Group defaultValue="a" size="small" style={{ marginTop: -16 }}>
                                                        <Radio value="url">文件</Radio>
                                                    </Radio.Group>
                                                    <Form.Item name="url">
                                                        <Button type="primary" onClick={showModalFile}>+上传文件</Button>
                                                        <Modal
                                                            title="上传文件"
                                                            visible={flag}
                                                            onOk={handleOkFile}
                                                            onCancel={handleCancelFile}
                                                        >
                                                            <Input type='file' onChange={(e) => {
                                                                let form = new FormData();
                                                                let files = e.target.files;
                                                                if (files) {
                                                                    for (let i = 0; i < files.length; i++) {
                                                                        form.append('file', files[i]);
                                                                    };
                                                                    addIndustry.getFile(form)
                                                                }
                                                            }} />
                                                        </Modal>
                                                    </Form.Item>
                                                    <Radio.Group defaultValue="a" size="small" style={{ marginTop: -16 }}>
                                                        <Radio value="resAdress">链接</Radio>
                                                    </Radio.Group>
                                                    <Form.Item name="resAdress">
                                                        <Input style={{ width: 200 }} />
                                                    </Form.Item>
                                                </div>
                                                <Form.Item label="描述" name="resDescription">
                                                    <Input />
                                                </Form.Item>
                                                <Form.Item label="教师" name="teacherAuthority">
                                                    <Radio.Group defaultValue="a" size="small">
                                                        <Radio value="1">可见</Radio>
                                                        <Radio value="2">不可见</Radio>
                                                    </Radio.Group>
                                                </Form.Item>
                                                <Form.Item label="学生" name="studentAuthority">
                                                    <Radio.Group defaultValue="a" size="small">
                                                        <Radio value="1">可见</Radio>
                                                        <Radio value="2">不可见</Radio>
                                                        <Radio value="3">可下载</Radio>
                                                    </Radio.Group>
                                                </Form.Item>
                                            </div>
                                        </Form>
                                    </div>
                                </Content> : ''
                            }
                        </Layout>
                    </Content>
                </Layout>
            </TabPane>
            <TabPane tab="实训环境" key="4">
                <div className={styles.environment}>
                    <Form onFinish={AddE}>
                        <div className={styles.environment_title}>
                            <Form.Item >
                                <CopyOutlined />  <Button type="primary" htmlType="submit">保存</Button>
                            </Form.Item>
                        </div>
                        <div className={styles.environment_content}>
                            <div>
                                <Form.Item label="项目名称" name='exName' rules={[{ required: true, message: "请输入项目名称" }]}>
                                    <Input placeholder='请输入标题' />
                                </Form.Item>
                            </div>
                            <div>
                                <Form.Item label="环境地址" name='exUrl' rules={[{ required: true, message: "请输入项目名称" }]}>
                                    <Input placeholder='请输入外部链接地址' />
                                </Form.Item>
                            </div>
                            <div>
                                <Form.Item label="环境描述" name='exDescribes' rules={[{ required: true, message: "请输入项目名称" }]}>
                                    <Input placeholder='请输入内容' />
                                </Form.Item>
                            </div>
                        </div>
                    </Form>
                </div>
            </TabPane>
            <TabPane tab="前置项目" key="5">
                <div className={styles.lead}>
                    <div className={styles.lead_content}>
                        <Form onFinish={AddP}>
                            <Form.Item >
                                <Button type="primary" htmlType="submit">保存</Button>
                            </Form.Item>
                            <Form.Item label="添加与新项目关联的项目" name="bizProId">
                                <Cascader options={LeadProjectList} placeholder="Please select" className={styles.select} />
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </TabPane>
        </Tabs>
    );
    //实训大纲
    let [TrainingSyllabus, setTrainingSyllabus] = useState<TrainingSyllabusList[]>([]);
    useEffect(() => {
        getTrainingSyllabus().then(ok => {
            setTrainingSyllabus(ok.data)
        })
    }, []);
    //实训大纲高亮
    let [briefId, setbriefId] = useState('');
    useEffect(() => {
        ResourcesItem(briefId, proVersionId as string).then(ok => {
        })
    }, [briefId]);
    const successT = () => {
        message.success('实训大纲保存成功');
    };
    //实训大纲保存
    const AddT = (values: any) => {
        successT()
        saveTrainingSyllabusList({ ...addIndustry.addT, briefId, content: values.content, proVersionId: location.query.versionId })
    }
    //添加任务
    let [TaskList, setTaskList] = useState<saveTask[]>([]);
    let proVersionId = location.query.versionId;
    useEffect(() => {
        renderTask(proVersionId as string).then(ok => {
            setTaskList(ok.data);
        })
    }, [proVersionId]);
    //删除任务
    let [id, setid] = useState('');
    useEffect(() => {
        if (id) {
            delTask(id).then(ok => {
                console.log(ok)
            })
        }
    }, [id]);
    //项目资源
    let [ProjectResourcesList, setProjectResourcesList] = useState<ProjectResourcesList[]>([]);
    useEffect(() => {
        getProjectResources().then(ok => {
            setProjectResourcesList(ok.data)
        })
    }, []);
    //项目资源保存
    const [resourceId, setresourceId] = useState('');
    useEffect(() => {
        ResourcesItem(resourceId, proVersionId as string).then(ok => {
        })
    }, [resourceId, proVersionId]);
    //上传文件
    const [flag, setflag] = useState(false);
    const showModalFile = () => {
        setflag(true);
    };
    const handleOkFile = () => {
        setflag(false);
    };
    const handleCancelFile = () => {
        setflag(false);
    };
    const successR = () => {
        message.success('项目资源保存成功');
    };
    const AddR = (values: any) => {
        successR()
        saveResoueces({ ...addIndustry.addR, id: location.query.versionId, projectResourcesList: [{ httpUrl: '', projectReourceAdressList: [{ url: values.url }], projectVersionId: location.query.versionId, projectid: location.query.proId, resAdress: values.resAdress, resDescription: values.resDescription, resName: values.resName, studentAuthority: values.studentAuthority, teacherAuthority: values.teacherAuthority, resFiletype: 2, resType: 10 }] })
    }
    //实训环境保存
    const successE = () => {
        message.success('实训环境保存成功');
    };
    const AddE = (values: any) => {
        successE()
        saveEnvironment({ ...addIndustry.addE, id: location.query.versionId, proExperimentalList: [{ exName: values.exName, exDescribes: values.exDescribes, exUrl: values.exUrl, proId: location.query.proId, proVersionId: location.query.versionId, exType: 2, exid: '' }] })
    };
    //前置项目
    let [LeadProjectList, setLeadProjectList] = useState<LeadProjectList[]>([]);
    useEffect(() => {
        getLeadProject().then(ok => {
            setLeadProjectList(ok.data)
        })
    }, []);
    //前置项目保存
    const successP = () => {
        message.success('前置项目保存成功');
    };
    const AddP = (values: any) => {
        let bizProId = values.bizProId[1];
        successP()
        saveProject({ ...addIndustry.addP, proVersionId: location.query.versionId, proId: location.query.proId, bizProIdList: [bizProId] })
    }
    return <div className={styles.addProject}>
        <div className={styles.box}>
            <div className={styles.header}>
                <span>项目</span>
                <span>/</span>
                <span>添加项目</span>
            </div>
            <div className={styles.title}>
                <h3>添加项目</h3>
                <p>
                    <Link to='/teachers/proManagement'><Button>返回</Button></Link>
                    <Button type="primary"><DingdingOutlined />提交审核</Button>
                </p>
            </div>
        </div>
        <div className={styles.c2}>
            <Form
                onFinish={AddIndustry}
                form={form}
                key={JSON.stringify(addIndustry.addIndustryItem)}
                initialValues={{ ...addIndustry.addIndustryItem, ...addIndustry.addIndustryItem }}
            >
                <div className={styles.c1}>
                    <h3>基本信息</h3>
                    <p>
                        {
                            versoinId ? <Button type="text" icon={<FormOutlined />} htmlType="submit">编辑</Button> : <Button type="text" icon={<SaveOutlined />} htmlType="submit">保存</Button>
                        }
                    </p>
                </div>
                <div className={styles.c3}>
                    <div className={styles.left}>
                        <div>
                            <Form.Item label="项目名称" name='name' rules={[{ required: true, message: "请输入项目名称" }]}>
                                <Input className={styles.n1} placeholder='请输入项目名称' />
                            </Form.Item>
                            <Form.Item label="版本号  V" name='version' rules={[{ required: true, message: "请输入版本号" }]}>
                                <Input className={styles.n2} placeholder='请输入版本号' />
                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item rules={[{ required: true, message: "请输入项目简介" }]} name="description">
                                <Input className={styles.n3} placeholder='请输入项目简介' />
                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item label="专业" name='majorStationList' rules={[{ required: true, message: "请选择专业" }]}>
                                <Cascader options={skillLabel} placeholder="请选择" className={styles.select} />
                            </Form.Item>
                            <Form.Item label="行业" name="trade" rules={[{ required: true, message: "请选择行业" }]}>
                                <Select style={{ width: 220 }} mode="tags" tokenSeparators={[',']} >
                                    {
                                        curIndustry.map((item, index) => {
                                            return <Select.Option value={item.value} key={index}>{item.label}</Select.Option>
                                        })
                                    }
                                </Select>
                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item label="实训类型" name="sxType" rules={[{ required: true, message: "请选择实训类型" }]} >
                                <Select style={{ width: 310 }}>
                                    {
                                        sxtype.map((item, index) => {
                                            return <Select.Option value={JSON.stringify(item)} key={index}>{item}</Select.Option>
                                        })
                                    }
                                </Select>
                            </Form.Item>
                            <Form.Item label="预计总工时" name="subjectTime" rules={[{ required: true, message: "请输入总工时" }]}>
                                <Input type="number" />
                            </Form.Item>
                        </div>
                    </div >
                    <div className={styles.right}>
                        <div>
                            {
                                addIndustry.ProjectDetailImg
                                    // 详情页自带图片
                                    ? <img src={`http://111.203.59.61:8060${addIndustry.ProjectDetailImg}`} alt="" onClick={showModal} />
                                    // 添加后的图片
                                    : <img src={`http://111.203.59.61:8060${addIndustry.addIndustryItem.pictureUrl}`} alt="" onClick={showModal} />
                            }
                            <Modal
                                title="上传封面"
                                visible={isModalVisible}
                                onOk={handleOk}
                                onCancel={handleCancel}
                            >
                                <Input type='file' onChange={(e) => {
                                    let form = new FormData();
                                    let files = e.target.files;
                                    if (files) {
                                        for (let i = 0; i < files.length; i++) {
                                            form.append('file', files[i]);
                                        };
                                        addIndustry.addProjectImg(form)
                                    }
                                }} />
                            </Modal>
                        </div>
                        <div>
                            <Form.Item label="演示地址" name="showUrl" rules={[{ required: true, message: "请输入演示地址" }]}>
                                <Input />
                            </Form.Item>
                        </div>
                    </div>
                </div>
            </Form>
        </div >
        <div className={styles.bottom}>
            {
                versoinId ? <Demo /> : <div className={styles.tabTitle}>
                    {
                        tab.map((item, index) => {
                            return <p key={index}>{item}</p>
                        })
                    }
                </div>
            }
        </div>
    </div >
};
export default observer(addProject)
